<template>
  <div class="app-container">
    <el-button type="text" @click="showChapterForm()">添加章节</el-button>
    <!-- 章节 -->
    <ul class="chanpterList">
      <li v-for="chapter in chapterList" :key="chapter.id">
        <p>
          {{ chapter.title }}
          <span class="acts">
            <el-button type="text" @click="showVideoForm(chapter.id)"
              >添加课时</el-button
            >
            <el-button style="" type="text" @click="showChapterForm(chapter.id)"
              >编辑</el-button
            >
            <el-button type="text" @click="delChapterById(chapter.id)"
              >删除</el-button
            >
          </span>
        </p>

        <!-- 视频 -->
        <ul class="chanpterList videoList">
          <li v-for="video in chapter.videoVos" :key="video.id">
            <p>
              {{ video.title }}
              <el-tag type="danger" v-if="!video.videoSourceId" size="mini">
                {{ "尚未上传视频" }}
              </el-tag>
              <span class="acts">
                <el-tag type="success" v-if="video.free" size="mini">
                  {{ "免费观看" }}
                </el-tag>
                <el-button
                  type="text"
                  @click="showVideoForm(chapter.id, video.id)"
                  >编辑</el-button
                >
                <el-button type="text" @click="delVideoById(video.id)"
                  >删除</el-button
                >
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>

    <!-- 使用组件 -->
    <chapter-form ref="chapterForm" />
    <video-form ref="videoForm" />

    <div style="text-align: center">
      <el-button type="primary" @click="previous">上一步</el-button>
      <el-button type="primary" :disabled="saveBtnDisabled" @click="next"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
import chapterApi from "@/api/edu/chapter";
import videoApi from "@/api/edu/video";
// 1.引入组件
import ChapterForm from "@/views/edu/course/components/Chapter/Form.vue";
import VideoForm from "@/views/edu/course/components/Video/Form.vue";
export default {
  // 2.注册组件
  components: { ChapterForm, VideoForm },
  data() {
    return {
      saveBtnDisabled: false, // 是否禁用
      chapterList: [],
      chapter: {},
    };
  },

  created() {
    this.nestedListChapter(this.$route.params.id);
  },

  methods: {
    // 根据课程id获取所有数据
    nestedListChapter(courseId) {
      chapterApi.nestedListChapter(courseId).then((response) => {
        this.chapterList = response.data.items;
      });
    },

    // 打开章节弹窗
    showChapterForm(id) {
      // this.$refs.chapterForm 获取子组件对象，就可以执行这个对象里的属性还有方法
      if (id) {
        // 如果有id表示修改
        this.$refs.chapterForm.open(id);
      } else {
        // 没有id表示新增
        this.$refs.chapterForm.open();
      }
    },
    // 打开课程弹窗
    showVideoForm(chapterId, videoId) {
      if (videoId) {
        // 有videoId表示修改
        this.$refs.videoForm.open(chapterId, videoId);
      } else {
        // 新增
        this.$refs.videoForm.open(chapterId);
      }
    },

    delVideoById(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          videoApi.delVideoById(id).then((response) => {
            this.nestedListChapter(this.$route.params.id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delChapterById() {
      this.$confirm("此操作将永久删除该课时, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {         
          
          chapterApi.delChapterById(id).then((response) => {
            alert("DDD")
            console.log(id)
            this.nestedListChapter(this.$route.params.id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {});
    },
    delChapterById(id) {
      this.$confirm("此操作将永久删除该课时, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除成功，刷新页面
          chapterApi.delChapterById(id).then((response) => {
            this.nestedListChapter(this.$route.params.id);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {});
    },

    // 上一步按钮
    previous() {
      this.saveBtnDisabled = true; // 禁用
      this.$parent.active = 0; // 当前的active为1，将值改成0，上一个组件
    },

    // 下一步按钮
    next() {
      this.saveBtnDisabled = true;
      this.$parent.active = 2;
    },
  },
};
</script>

<style scoped>
.chanpterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chanpterList li {
  position: relative;
}
.chanpterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chanpterList .acts {
  float: right;
  font-size: 14px;
}

.videoList {
  padding-left: 50px;
}
.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>